<template>
  <div class="header">
    <div class="icon">
      <i class="iconfont icon-return" @click="back"></i>
    </div>
    <div class="title">
      <slot>
        <span>登录</span>
      </slot>
    </div>
    <div class="icon">
      <i class="iconfont icon-home" @click="goHome"></i>
    </div>
  </div>
</template>

<script>
	export default{
		name:'Header',
		methods:{
			back(){
				this.$router.back()
			},
			goHome(){
				this.$router.push('/')
			}
		}
	}
</script>

<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #b0352f;
  width: 100%;
  height: 1.25rem;
  line-height: 1.25rem;
  color: #fff;

  .title {
    flex: 1;
    text-align: center;
    font-size: 0.56rem;
  }
  .icon {
    padding: 0 0.25rem;
    height: 100%;

    i {
      font-size: 0.56rem;
    }
  }
}
</style>
